<template>
    <van-field name="uploader" label="证件照">
        <template #input>
            <van-uploader
                    :after-read="afterRead"
                    :max-size="10 * 1024 * 1024"
                    @oversize="onOversize"
                    :max-count="1"
                    v-model="fileList"
            >
                <template>
                    <div class="van-uploader__upload">
                        <i class="van-icon van-icon-photograph van-uploader__upload-icon"></i>
                        <input type="file" class="van-uploader__input"></div>
                </template>
            </van-uploader>
        </template>
    </van-field>
</template>
<script>
    import {getBase64} from "../../../../components/imgUpload/urlToBase";

    export default {
        name: "vantImgUpload",
        props: {
            fileUrl: String,
        },
        data() {
            return {
                fileList: [],
            };
        },
        watch: {
            fileUrl: {
                deep: true,
                immediate: true,
                handler() {
                    if(this.fileUrl == ''){
                        this.fileList = []
                    }else {
                        console.log('this.fileUrl',this.fileUrl.includes('http'));
                        if(this.fileUrl.includes('http')){
                            this.fileList = [{url: this.fileUrl +'?'+ new Date()}];
                            console.log('this.fileUrl',this.fileList[0].url.split('?')[0])
                            getBase64(this.fileList[0].url.split('?')[0]).then(res =>{
                                this.$emit('vantUpload',res);
                            })
                            // this.$emit('vantUpload',file.content);
                        }
                    }
                }
            }
        },
        methods: {
            // 文件超过大小
            onOversize(file) {
                console.log(file);
                this.$toast("文件大小不能超过 10M");
            },
            /**文件上传 */
            afterRead(file) {
                // console.log(file);
                // if (!/image\/[a-zA-z]+/.test(file.file.type)) {
                //   this.$toast("请上传图片");
                //   return false;
                // }
                let that = this;
                console.log('file',file.content)
                this.$emit('vantUpload',file.content);
            },
            base64ImgtoFile(dataurl, filename = 'file') {
                let arr = dataurl.split(',')
                let mime = arr[0].match(/:(.*?);/)[1]
                let suffix = mime.split('/')[1]
                let bstr = atob(arr[1])
                let n = bstr.length
                let u8arr = new Uint8Array(n)
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n)
                }
                return new File([u8arr], `${filename}.${suffix}`, {
                    type: mime
                })
            }
        }
    };
</script>
<style scoped>
    .van-uploader__upload {
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        box-sizing: border-box;
        width: 80px;
        height: 80px;
        margin: 0 8px 8px 0;
        background-color: #f7f8fa;
    }
</style>
